<template>
	<!-- 我的收藏页面 -->
	<view class="wrap">
		<view class="collect-item" v-for="(item,index) in collectMessage" :key="index">
			<!-- 商品图片 -->
			<view class="collect-image">
				<image :src="item.goods.cover_url"></image>
			</view>
			<!-- 商品信息 -->
			<view class="item-message">
				<view class="u-content">
					<u-parse :html="item.goods.description" class="collect_text"></u-parse>
				</view>
				<view>
					<text class="collect_time">创建时间：{{item.created_at}}</text>
				</view>
				<view>
					<text class="item_price">￥{{item.goods.price}}</text>
				</view>
				<view class="btn_de">
					<u-button size="mini" :custom-style="{border:'1px solid #ccc'}" :hair-line='false' @click="changeRoute(item.goods_id)">详情</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				collectMessage: [],
				id:''
			}
		},
		methods: {
			changeRoute(res){
				console.log(res);
				this.id=res
				uni.$on('send',res=>{
					uni.$emit('transmitId',this.id)
				})
				// uni.$emit('transmitId',index)
				uni.navigateTo({
				    // url: '/pages/bookDetail/bookDetail?id=' +this.id
					url: '/pages/bookDetail/bookDetail'
				});
			}
		},
		async onShow() {
			const params = {
				page: this.page
			}
			await this.$u.get('/api/collects', params).then(res => {
				console.log(res)
				this.collectMessage = res.data.data
			}).catch(err => {
				console.log(err)
			})
		}
	}
</script>

<style lang="scss" scoped>
	.collect_text {
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 3;
		/** 显示的行数 **/
		overflow: hidden;
		font-weight: 600;
		/** 隐藏超出的内容 **/
	}

	.collect-image {
		flex: 1;
	}

	.item-message {
		flex: 2;
		padding: 5px ;
	}

	.wrap {
		padding: 40rpx;
	}

	.collect-item {
		display: flex;
		margin-bottom: 40rpx;
	}

	image {
		width: 120px;
		height: 120px;
	}

	.item-message {
		display: flex;
		flex-direction: column;
	}

	.item-message view {
		flex: 1;
	}

	.btn_de {
		text-align: right;
	}
	.collect_time{
		color: #C0C0C0;
	}
	.item_price{
		color: red;
	}
	.u-button{
		border: 1px solid #ccc !important;
		
	}
</style>
